<template>
  <page-loading :show="pageLoading">
    <view>
      <view class="container" v-if="info">
        <view class="header">
          <view class="header-left">
            <i-icon
              :icon="statusIcon[info.quote_Status]"
              type="single"
              size="34rpx"
              color="#333"
            ></i-icon>
            <text class="text">{{ status[info.quote_Status] }}</text>
          </view>
          <view class="header-right" v-if="info.quote_Status === 10">
            <text style="font-weight: 500; font-size: 24rpx"
              >剩余询价时间：</text
            >
            <text>{{ remainder }}</text>
          </view>
        </view>

        <!-- 车型模块 -->
        <view class="order" v-if="info">
          <view class="item flex" :class="info.vin_No ? '' : 'vin'">
            <view class="item-left">车型：</view>
            <view class="item-right name"
              >{{ info.brand_Name }} {{ info.car_Type_Name }}
              {{ info.configuration_Name }}</view
            >
          </view>
          <view class="item flex vin" v-if="info.vin_No">
            <view class="item-left">VIN:</view>
            <view class="item-right">{{ info.vin_No }}</view>
          </view>
          <view class="item flex">
            <view class="item-left">询价主体：</view>
            <view class="item-right">
              <text>{{ info.store_Name }}</text>
              <i-icon
                v-if="info.store_Status"
                class="icon-store"
                icon="iconmendianrenzheng"
                type="single"
                size="32rpx"
                color="#60C534"
              ></i-icon>
              <i-icon
                v-if="info.deposit_Balance > 0"
                class="icon-store"
                icon="iconbao_1"
                type="single"
                size="28rpx"
                color="#eb5c02"
              ></i-icon>
            </view>
          </view>
          <view class="item flex">
            <view class="item-left">联系人：</view>
            <view class="item-right">{{ formatName }}</view>
          </view>
          <view class="item flex">
            <view class="item-left">联系电话：</view>
            <view class="item-right flex flex-jc-sb">
              <text>{{ formatPhone }}</text>
              <text class="phone-tip">报价后可见联系买方</text>
            </view>
          </view>
          <view class="item flex">
            <view class="item-left">收货地址：</view>
            <view class="item-right"
              >{{ info.receiver_Address_Json.province
              }}{{ info.receiver_Address_Json.city
              }}{{ info.receiver_Address_Json.district
              }}{{ info.receiver_Address_Json.address }}</view
            >
          </view>
          <view class="item flex">
            <view class="item-left">询价日期：</view>
            <view class="item-right">{{ dateFormat(info.addTime) }}</view>
          </view>
          <view class="item flex">
            <view class="item-left">截至日期：</view>
            <view class="item-right">{{
              dateFormat(info.effective_Time)
            }}</view>
          </view>
          <view class="item flex">
            <view class="item-left">发票信息：</view>
            <view class="item-right">{{
              info.is_Need_Invoice ? '需开发票' : '不需开票'
            }}</view>
          </view>
        </view>

        <!-- 询价清单 -->
        <view class="enMolder">
          <view class="enMolder-head">询价清单</view>
          <view
            class="enMolder-item"
            v-for="(item, index) in info.carPartDetails"
            :key="index"
          >
            <view class="enMolder1">
              <view class="en-left">
                <view class="en-left-num">
                  <view class="en-num">{{ index + 1 }}</view>
                </view>

                <view class="en-name">{{ item.part_Category_Name }}</view>
                <view class="buy-flag" v-if="item.is_purchase">已下单</view>
              </view>
              <view class="en-right">x{{ item.purchase_Number }}</view>
            </view>
            <view class="enMolderImg" v-if="item.images">
              <image
                v-for="img in handdleImg(item.images)"
                :key="img"
                :src="img"
              ></image>
            </view>
            <view class="enMolder2">
              <view class="en-left">品质:</view>
              <view class="en-right text-line2">{{
                quality[info.character_Type]
              }}</view>
            </view>
            <view class="enMolder2">
              <view class="en-left">说明:</view>
              <view class="en-right text-line2">{{ item.explain_Text }}</view>
            </view>
            <view class="buy-flag-modal" v-if="item.is_purchase"></view>
          </view>
        </view>

        <!--      询单信息-->
        <view class="info">
          <view class="info-title">询单信息</view>
          <view class="info-item">
            询价单号：<text class="text">{{ info.inquiry_No }}</text
            ><text class="copy" @click="copy(info.inquiry_No)">复制</text>
          </view>
          <view class="info-item">
            创建时间：<text class="text">{{ dateFormat(info.addTime) }}</text>
          </view>
          <view class="info-item" v-if="info.updateTime">
            再编时间：<text class="text">{{
              dateFormat(info.updateTime)
            }}</text>
          </view>
          <view class="info-item" v-if="info.quote_Status === 20">
            报价时间：<text class="text">{{
              dateFormat(info.first_Offer_Time)
            }}</text>
          </view>
          <view class="info-item" v-if="info.quote_Status === 30">
            过期时间：<text class="text">{{
              dateFormat(info.effective_Time)
            }}</text>
          </view>
          <view class="info-item" v-if="info.quote_Status === 0">
            取消时间：<text class="text">{{
              dateFormat(info.cancelTime)
            }}</text>
          </view>
        </view>

        <!-- 按钮 -->
        <!--      待报价 带分享按钮的，分享功能暂时不做 -->
        <!--      <view class="btn-wrap flex" v-if="info.quote_Status === 10">-->
        <!--        <view class="btn-left flex flex-dir-c flex-jc-c flex-ai-c" @click="handleModal('cancel')">-->
        <!--          <i-icon icon="iconquxiaoxunjia" type="single" size="34rpx" color="#FFE23E"></i-icon>-->
        <!--          <text>取消询价</text>-->
        <!--        </view>-->
        <!--        <view class="btn-center flex flex-dir-c flex-jc-c flex-ai-c" @click="share">-->
        <!--          <i-icon icon="iconfenxiang" type="single" size="34rpx" color="#FFE23E"></i-icon>-->
        <!--          <text>分享</text>-->
        <!--        </view>-->
        <!--        <view class="btn-right" @click="edit">-->
        <!--          <i-icon icon="iconqiyebianji" type="single" size="28rpx" color="#333"></i-icon>-->
        <!--          <text class="btn-right-text">编辑</text>-->
        <!--        </view>-->
        <!--      </view>-->

        <!--      待报价-->
        <view class="btn-wrap flex" v-if="info.quote_Status === 10">
          <button class="reset" @click="handleModal('cancel')">
            <i-icon
              icon="iconshangjia"
              type="single"
              size="28rpx"
              color="#FFE23E"
            ></i-icon>
            <text class="btn-right-text">取消询价</text>
          </button>
          <button class="btn-right" @click="edit">
            <i-icon
              icon="iconqiyebianji"
              type="single"
              size="28rpx"
              color="#333"
            ></i-icon>
            <text class="btn-right-text">编辑</text>
          </button>
        </view>
        <!--已取消-->
        <view class="btn-wrap flex" v-else-if="info.quote_Status === 0">
          <button class="cancel-left" @click="handleModal('del')">
            删除询价
          </button>
          <button class="cancel-right" @click="handleModal('reset')">
            恢复询价
          </button>
        </view>
        <!--      已报价-->
        <view class="btn-wrap flex" v-else-if="info.quote_Status === 20">
          <button class="cancel" @click="handleModal('cancel')">
            取消询价
          </button>
        </view>
        <!--      已过期-->
        <view class="btn-wrap flex" v-else-if="info.quote_Status === 30">
          <button class="reset" @click="handleModal('reset')">
            <i-icon
              icon="iconshangjia"
              type="single"
              size="28rpx"
              color="#FFE23E"
            ></i-icon>
            <text class="btn-right-text">上架</text>
          </button>
          <button class="btn-right" @click="edit">
            <i-icon
              icon="iconqiyebianji"
              type="single"
              size="28rpx"
              color="#333"
            ></i-icon>
            <text class="btn-right-text">编辑</text>
          </button>
        </view>
      </view>

      <!--    弹窗-->
      <view>
        <u-modal
          :title="modalTitle"
          v-model="showModal"
          width="74%"
          :mask-close-able="true"
          :title-style="{
            fontWeight: 'bold',
            fontSize: '36rpx',
            color: '#333333',
          }"
          :show-confirm-button="false"
        >
          <view class="slot-content">
            <rich-text :nodes="modalText"></rich-text>
          </view>
          <view class="woxiangxbox">
            <view>
              <button class="slot-contentbutto2" @click="modalCancel">
                {{ modalBtnLeft }}
              </button>
            </view>
            <view>
              <button class="slot-contentbutto" @click="modalConfirme">
                {{ modalBtnRight }}
              </button>
            </view>
          </view>
        </u-modal>
      </view>
    </view></page-loading
  >
</template>

<script src="./myInquiryDetail.js"></script>
<style lang="scss" scoped>
@import './myInquiryDetail.scss';
</style>
